{% extends 'base.html' %}

{% block title %}{{ product.name }} - МОЙ НЕ САМ{% endblock %}

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'catalog' %}">Каталог</a></li>
        {% if product.category %}
        <li class="breadcrumb-item"><a href="{% url 'catalog' %}?category={{ product.category.id }}">{{ product.category.name }}</a></li>
        {% endif %}
        <li class="breadcrumb-item active" aria-current="page">{{ product.name }}</li>
    </ol>
</nav>

<div class="row">
    <!-- Изображение товара -->
    <div class="col-md-5">
        <div class="card mb-4">
            {% if product.image %}
            <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}">
            {% else %}
            <div class="bg-light text-center py-5" style="height: 300px;">
                <span class="text-muted">Нет изображения</span>
            </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Информация о товаре -->
    <div class="col-md-7">
        <h1 class="mb-3">{{ product.name }}</h1>
        
        {% if product.category %}
        <p class="text-muted">Категория: {{ product.category.name }}</p>
        {% endif %}
        
        <p class="fs-4 fw-bold mb-4">Цена: {{ product.price }} ₽</p>
        
        <div class="mb-4">
            <h5>Описание:</h5>
            <p>{{ product.description }}</p>
        </div>
        
        <div class="d-flex flex-wrap gap-2 mb-4">
            {% if request.user.is_authenticated %}
            <a href="{% url 'add_to_cart' product.id %}" class="btn btn-primary btn-lg">Добавить в корзину</a>
            
            {% if is_favorite %}
            <form action="{% url 'remove_from_favorites' favorite_id %}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-outline-danger btn-lg">Удалить из избранного</button>
            </form>
            {% else %}
            <a href="{% url 'add_to_favorites' product.id %}" class="btn btn-outline-primary btn-lg">Добавить в избранное</a>
            {% endif %}
            {% else %}
            <div class="alert alert-info">
                <a href="{% url 'login' %}">Войдите</a> или <a href="{% url 'register' %}">зарегистрируйтесь</a>, чтобы добавить товар в корзину или избранное.
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Отзывы -->
<div class="mt-5">
    <h2 class="mb-4">Отзывы о товаре</h2>
    
    {% if reviews %}
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 border-end">
                    <div class="text-center">
                        <h4>Средняя оценка</h4>
                        <div class="display-4 fw-bold">
                            {% with avg_rating=reviews|length %}
                            {{ avg_rating }}
                            {% endwith %}
                        </div>
                        <p>Всего отзывов: {{ reviews|length }}</p>
                    </div>
                </div>
                <div class="col-md-8">
                    <h4>Распределение оценок</h4>
                    <div class="mb-2">
                        <div class="d-flex align-items-center">
                            <span class="me-2">5 ★</span>
                            <div class="progress flex-grow-1">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ms-2">45%</span>
                        </div>
                    </div>
                    <div class="mb-2">
                        <div class="d-flex align-items-center">
                            <span class="me-2">4 ★</span>
                            <div class="progress flex-grow-1">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ms-2">30%</span>
                        </div>
                    </div>
                    <div class="mb-2">
                        <div class="d-flex align-items-center">
                            <span class="me-2">3 ★</span>
                            <div class="progress flex-grow-1">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ms-2">15%</span>
                        </div>
                    </div>
                    <div class="mb-2">
                        <div class="d-flex align-items-center">
                            <span class="me-2">2 ★</span>
                            <div class="progress flex-grow-1">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 7%" aria-valuenow="7" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ms-2">7%</span>
                        </div>
                    </div>
                    <div class="mb-2">
                        <div class="d-flex align-items-center">
                            <span class="me-2">1 ★</span>
                            <div class="progress flex-grow-1">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 3%" aria-valuenow="3" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ms-2">3%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Список отзывов -->
    {% for review in reviews %}
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between">
            <div>
                <strong>{{ review.user.get_full_name|default:review.user.username }}</strong>
                <span class="text-muted ms-2">{{ review.created_at|date:"d.m.Y" }}</span>
            </div>
            <div>
                {% for i in "12345" %}
                {% if forloop.counter <= review.rating %}
                <span class="text-warning">★</span>
                {% else %}
                <span class="text-muted">☆</span>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        <div class="card-body">
            <p class="card-text">{{ review.comment }}</p>
        </div>
    </div>
    {% endfor %}
    {% else %}
    <div class="alert alert-info">
        Пока нет отзывов об этом товаре. Будьте первым!
    </div>
    {% endif %}
    
    <!-- Форма добавления отзыва -->
    {% if request.user.is_authenticated %}
    <div class="card mt-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">Добавить отзыв</h5>
        </div>
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                
                <div class="mb-3">
                    <label for="id_rating" class="form-label">Оценка</label>
                    <select class="form-select" id="id_rating" name="rating">
                        <option value="5">5 - Отлично</option>
                        <option value="4">4 - Хорошо</option>
                        <option value="3">3 - Нормально</option>
                        <option value="2">2 - Плохо</option>
                        <option value="1">1 - Ужасно</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="id_comment" class="form-label">Комментарий</label>
                    <textarea class="form-control" id="id_comment" name="comment" rows="4"></textarea>
                </div>
                
                <button type="submit" class="btn btn-primary">Отправить отзыв</button>
            </form>
        </div>
    </div>
    {% else %}
    <div class="alert alert-info mt-4">
        <a href="{% url 'login' %}">Войдите</a> или <a href="{% url 'register' %}">зарегистрируйтесь</a>, чтобы оставить отзыв.
    </div>
    {% endif %}
</div>
{% endblock %}